<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		li{list-style:none;}
		#wrap{
			width:1000px;
			margin:100px auto;
			overflow:hidden;
			position:relative;
			border-radius: 20px;
		}
		.imgList img{
			width:1000px;
		}
		.imgList li{
			float:left;
		}
		.imgList{
			width:9999999px;
			overflow:hidden;
		}
		#prev,#next{
			position:absolute;
			top:40%;
			transition:all .5s;
			opacity:.8;
			cursor: pointer;
		}
		#prev:hover,#next:hover{
			transform: scale(1.1);
			opacity:1;
		}
		#prev{
			left:30px;
		}
		#next{
			right:30px;
		}
		.dotList{
			position:absolute;
			bottom:20px;
			left:40%;
		}
		.dotList li{
			float:left;
			width: 10px;
			height: 10px;
			border-radius:50%;
			background-color:#fff;
			cursor:pointer;
			margin-right:20px;
		}
		.dotList .focus{
			background-color:#f99;
		}
	</style>
</head>
<body>
	
	<div id="wrap">
		<ul class="imgList" style="margin-left:0px;">
			<li><img src="images/love1.jpg" alt=""></li>
			<li><img src="images/love2.jpg" alt=""></li>
			<li><img src="images/love3.jpg" alt=""></li>
			<li><img src="images/love4.jpg" alt=""></li>
			<li><img src="images/love5.jpg" alt=""></li>
		</ul>
		<img src="images/l.png"  id="prev" alt="">
		<img src="images/r.png" id="next" alt="">

		<ul class="dotList">
		</ul>

	</div>

	<script src="../../machine.js"></script>
	<script>
		var next = $("#next")
		var imgList = $(".imgList");
		var dotWrap = $(".dotList");
		var n = 0;	//当前在第几张
		var width = 1000;	//图片的宽度
		var count = $(".imgList li").length //图片的个数，动态获取。
		var distance = 50;	//每一帧移动的距离
		var isAnimationActive = false;	//当前动画是否处于活动状态 

		// 初始化小圆点
		for(var i = 0; i < count;i++){
			var li = document.createElement("li");
			li.setAttribute("index",i)
			dotWrap.appendChild(li)
			if(i === 0){
				li.className = "focus"				
			}
		}

		var dotList = dotWrap.getElementsByTagName("li")	//小圆点NodeList
		function changeDot(){
			// 清除掉所有小圆点的类名
			for(var j = 0; j < count;j++){
				dotList[j].className = ""
			}
			// 给当前小圆点追加focus类
			dotList[n].className = "focus";
		}

		// 为小圆点绑定点击事件
		for(var i = 0; i < count;i++){
			dotList[i].onclick = function(){
				if(!isAnimationActive){
					isAnimationActive = true;

					// 要去往的目标
					var target = Number(this.getAttribute("index"));
					if(n < target){
						// 目标与当前所在张数相差的绝对值
						var abs = target - n;
						n = target;
						var t = setInterval(function(){
							// 获取ul的左边距并转换为Number类型
							var ml = parseInt(imgList.style.marginLeft)

							// 如果当前的ul的左边距和目标的左边距不吻合时
							if(ml !== -(n * width)){
								// 让ul向左移动abs个单位的距离
								imgList.style.marginLeft = (ml - distance * abs) + "px";
							}
							//如果发现ul左边距已经到达了目标值时
							else{
								// 停止计时器
								clearInterval(t)
								isAnimationActive = false;
							}
						},16)
					}
					if(n > target){
						// 目标与当前所在张数相差的绝对值
						var abs =  n - target;
						n = target;
						var t = setInterval(function(){
							// 获取ul的左边距并转换为Number类型
							var ml = parseInt(imgList.style.marginLeft)

							// 如果当前的ul的左边距和目标的左边距不吻合时
							if(ml !== -(n * width)){
								// 让ul向右移动abs个单位的距离
								imgList.style.marginLeft = (ml + distance * abs) + "px";
							}
							//如果发现ul左边距已经到达了目标值时
							else{
								// 停止计时器
								clearInterval(t)
								isAnimationActive = false;
							}

						},16)
					}
					changeDot();
				}
			}
		}

		next.onclick = function(){
			if(!isAnimationActive){
				isAnimationActive = true;
				// 是不是不在最后一张
				if(n < count - 1){
					//去下一张
					n++;

					var t = setInterval(function(){
						// 获取ul的左边距并转换为Number类型
						var ml = parseInt(imgList.style.marginLeft)

						// 如果当前的ul的左边距和目标的左边距不吻合时
						if(ml !== -(n * width)){
							// 让ul向左移动一个单位的距离
							imgList.style.marginLeft = (ml - distance) + "px";
						}
						//如果发现ul左边距已经到达了目标值时
						else{
							// 停止计时器
							clearInterval(t)
							isAnimationActive = false;
						}

					},16)
				}

				// 已经在最后一张的时候
				else{
					// 去第0张
					n = 0;

					var t = setInterval(function(){
						// 获取ul的左边距并转换为Number类型
						var ml = parseInt(imgList.style.marginLeft)

						// 如果当前的ul的左边距和目标的左边距不吻合时
						if(ml !== -(n * width)){
							// 让ul向右移动count个单位的距离
							imgList.style.marginLeft = (ml + distance * count) + "px";
						}
						//如果发现ul左边距已经到达了目标值时
						else{
							// 停止计时器
							clearInterval(t)
							isAnimationActive = false;
						}

					},16)
				}
				// 更新小圆点的状态
				changeDot()
			}
		}
		prev.onclick = function(){
			if(!isAnimationActive){
				// 是不是不在第0张
				if(n !== 0){
					//去上一张
					n--;

					var t = setInterval(function(){
						// 获取ul的左边距并转换为Number类型
						var ml = parseInt(imgList.style.marginLeft)

						// 如果当前的ul的左边距和目标的左边距不吻合时
						if(ml !== -(n * width)){
							// 让ul向右移动一个单位的距离
							imgList.style.marginLeft = (ml + distance) + "px";
						}
						//如果发现ul左边距已经到达了目标值时
						else{
							// 停止计时器
							clearInterval(t)
							isAnimationActive = false;
						}

					},16)
				}
				// 已经在第0张了
				else{
					// 去最后一张
					n = count - 1;

					var t = setInterval(function(){
						// 获取ul的左边距并转换为Number类型
						var ml = parseInt(imgList.style.marginLeft)

						// 如果当前的ul的左边距和目标的左边距不吻合时
						if(ml !== -(n * width)){
							// 让ul向左移动count个单位的距离
							imgList.style.marginLeft = (ml - distance * count) + "px";
						}
						//如果发现ul左边距已经到达了目标值时
						else{
							// 停止计时器
							clearInterval(t)
							isAnimationActive = false;
						}

					},16)
				}
				// 更新小圆点的状态
				changeDot()
			}
		}

		// 自动播放功能
		var autoPlay = setInterval(function(){
			next.click()
		},6000)
		// 智能判断
		$("#wrap").onmouseenter = function(){
			clearInterval(autoPlay)
		}
		$("#wrap").onmouseleave = function(){
			autoPlay = setInterval(function(){
				next.click()
			},6000)
		}
	</script>
</body>
</html>